<template>
  <div id="album">
    <div class="album">
      <span style="font-size:24px;">热门新碟</span>
      <hr />
      <ul>
        <li v-for="(item , index) in newAlbum" :key="index">
          <img :src="item.blurPicUrl+'?param=130y130'" :alt="item.name" />
          <p class="fp" @click="jupAlbum(item.id)">{{item.name}}</p>
          <p class="lp" @click="jupSinger(item.artists[0].id)">{{item.artists[0].name}}</p>
        </li>
      </ul>
      <span style="font-size:24px;">全部新碟</span>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item>
          <a href="#/discover/album?type=全部" @click="changeTit('ALL')">全部</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/album?type=华语" @click="changeTit('ZH')">华语</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/album?type=欧美" @click="changeTit('EA')">欧美</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/album?type=韩国" @click="changeTit('KR')">韩国</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="#/discover/album?type=日本" @click="changeTit('JP')">日本</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item style="display:none">
          <a href="#">日本</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <hr />
      <ul class="newAlbum">
        <li v-for="(item,index) in albums" :key="index">
          <img :src="item.blurPicUrl+'?param=130y130'" :alt="item.name" />
          <p class="fp" @click="jupAlbum(item.id)">{{item.name}}</p>
          <p class="lp" @click="jupSinger(item.artists[0].id)">{{item.artists[0].name}}</p>
        </li>
      </ul>
      <div style="margin-left:20%"><el-button type="success" @click.native="prex" v-show="temp!=0">上一页</el-button><el-button type="success" @click.native="next">下一页</el-button></div>
    </div>
  </div>
</template>
<style>
 @media screen and (max-width: 650px){
  #album .album ul {
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: repeat(5, 200px);
  } 
} 
#album {
  width: 980px;
  margin: 0 auto;
  padding-top: 45px;
}
.album {
  width: 900px;
  margin: 0 auto;
}
.album p:hover {
  color: #c20c0c;
  cursor: pointer;
}
.album hr {
  border: none;
  height: 8px;
  border-bottom: 3px solid #c20c0c;
}

.album ul li {
  /* background-color: #c20c0c; */
  background-image: url(../assets/img/coverall.png);
  background-repeat: no-repeat;
}
.album ul li img {
  width: 130px;
}

.album ul {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(2, 200px);
  margin-top: 20px;
}
.album .newAlbum {
  grid-template-rows: repeat(4, 200px);
}

.album .el-breadcrumb {
  display: inline-block;
  margin-left: 20px;
}
.album .el-breadcrumb__inner a {
  color: #666;
  font-size: 12px;
}
.album .el-breadcrumb__inner a:hover {
  color: #c20c0c;
}
.album .el-button{
    background-color: #c20c0c;
}
</style>
<script>
import axios from "axios";
export default {
  data() {
    return {
      //前8首专辑
      newAlbum: [],
      albums: [],
      temp: 0,
      tit:'ALL'
    };
  },
  mounted() {
      //获得最新10张专辑
      axios
        .get("https://autumnfish.cn/album/newest")
        .then(newAlbum => {
          this.newAlbum = newAlbum.data.albums.filter((ele, index) => {
            return index < 10;
          });
        })
        .catch(err => {
          console.log(err);
        });
       this.getAlbum('ALL')
  },
  methods: {
    //获得20张专辑
    getAlbum(area) {   
    this.tit=area
      axios
        .get("https://autumnfish.cn/top/album?offset="+this.temp+"&limit=20&area="+this.tit)
        .then(albums => {
          this.albums = albums.data.albums;
        });
    },
    //分类API问题
    // changeTit(area){
    //     this.getAlbum(area)
    // },
    //上一页
    prex() {
        this.tepm-=20
       this.getAlbum(this.tit)
    },
    //下一页
    next() {
        this.temp+=20
        this.getAlbum(this.tit)
    },
    //歌手信息跳转
    jupSinger(id){
      this.$router.push('/discover/songerInfo/id='+id)
    },
    //跳转专辑信息也
    jupAlbum(id){
      this.$router.push('/discover/albumInfo/id='+id)
    }
  }
};
</script>